<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class=""> 我的记载 </view>
      <view class="head_right" @click="goPage" v-if="type == 'my'">
        {{ titleText }}
      </view>
    </view>

    <u-tabs
      class="tabs"
      :list="list1"
      @click="click"
      lineWidth="35"
      :scrollable="false"
      :activeStyle="{
        color: '#444',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
        'font-size': '32rpx',
      }"
      lineColor="#444444"
      :inactiveStyle="{
        color: '#888888',
        transform: 'scale(1)',
        'font-size': '32rpx',
      }"
    ></u-tabs>

    <scroll-view scroll-y="true">
      <view class="box1" v-show="currentIndex == 0">
        <!-- <u-collapse
          :border="false"
          v-for="(item, index) in familyList"
          :key="index"
          ref="collapse"
        >
          <u-collapse-item :title="item.name" v-if="item.list">
            <view
              class="item_text"
              @click="goDetail(1, itemVal)"
              v-for="(itemVal, ind) in item.list"
              :key="ind"
              >{{ itemVal.name }}</view
            >
          </u-collapse-item>
        </u-collapse> -->
        <view
          v-for="(item, index) in familyList"
          :key="index"
          style="padding: 0 30rpx"
        >
          <neo-tree-list-item
            :paramData="item"
            layer="0"
            @tapTitle="tapTitle"
            :type="type"
            :num="1"
          ></neo-tree-list-item>
        </view>

        <view class="empty_view" v-if="familyList && familyList.length == 0">
          <image
            class="item_left_clickable"
            src="@/static/images/my/kong.png"
            mode=""
          ></image>
          <view>当前没有相关数据。~</view>
        </view>
      </view>
      <view class="box1" v-show="currentIndex == 1">
        <!-- <u-collapse
          :border="false"
          v-for="(item, index) in homeList"
          :key="index"
          ref="collapse"
        >
          <u-collapse-item :title="item.name">
            <view
              class="item_text"
              @click="goDetail(2, itemVal)"
              v-for="(itemVal, ind) in item.list"
              :key="ind"
              >{{ itemVal.name }}</view
            >
          </u-collapse-item>
        </u-collapse> -->

        <view
          v-for="(item, index) in homeList"
          :key="index"
          style="padding: 0 30rpx"
        >
          <neo-tree-list-item
            :paramData="item"
            layer="0"
            @tapTitle="tapTitle"
            :type="type"
            :num="2"
          ></neo-tree-list-item>
        </view>
      </view>
    </scroll-view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import storage from "@/common/storage.js"; // 缓存封装
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      currentIndex: 0,
      list1: [
        {
          name: "我的家族",
        },
        {
          name: "我的家乡",
        },
      ],
      familyList: [],
      homeList: [],
      id: "",
      titleText: "添加成员",
      type: "",
      from: "",
      pageUrl: "",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.type = options.type;
    this.from = options.from;
    console.log(options, 55555);
    this.pageUrl = `/pages/detail/myRecord?id=${options.id}&type=${options.type}&from=${this.from}`;
    storage.set("pageUrl", this.pageUrl);
  },
  onShow: function () {
    if (this.currentIndex == 0) {
      this.getJiaZu();
    } else {
      this.getJiaXiang();
    }
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    // 返回当前点击的对象,仅最后一层对象有效
    tapTitle(data) {
      console.log(data, "当前层级");
    },

    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    click(e) {
      console.log("1111", e);
      this.currentIndex = e.index;
      if (e.index == 0) {
        this.titleText = "添加成员";
        this.getJiaZu();
      } else {
        this.titleText = "开始记载";
        this.getJiaXiang();
      }
    },
    goPage() {
      let from = "";
      if (this.currentIndex == 0) {
        from = "jiazu";
      } else {
        from = "jiaxiang";
      }
      uni.navigateTo({
        url: `/pages/detail/addMember?from=${from}&user_id=${this.id}`,
      });
    },
    goDetail(num, itemVal) {
      if (num == 1) {
        if (this.type == "my") {
          uni.navigateTo({
            url: `/pages/detail/flyDetail?type=my&detailType=myjiazu&currentId=${itemVal.id}&redirectTo=true`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/detail/flyDetail?type=bingshiyin&detailType=myjiazu&currentId=${itemVal.id}`,
          });
        }
      } else {
        if (this.type == "my") {
          uni.navigateTo({
            url: `/pages/detail/flyDetail?type=my&detailType=myjiaxiang&currentId=${itemVal.id}&redirectTo=true`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/detail/flyDetail?type=bingshiyin&detailType=myjiaxiang&currentId=${itemVal.id}`,
          });
        }
      }
    },

    open(e) {
      console.log("open", e);
    },
    close(e) {
      console.log("close", e);
    },
    change(e) {
      console.log("change", e);
    },
    // 家族列表
    getJiaZu() {
      this.$http
        .homeFamily_all({ user_id: this.id })
        .then((res) => {
          this.familyList = res.data.list;
          console.log(res, "家族");
          this.$forceUpdate();
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 家乡列表
    getJiaXiang() {
      this.$http
        .homeHome_all({ user_id: this.id })
        .then((res) => {
          this.homeList = res.data.list;
          console.log(res, "家乡");
          this.$forceUpdate();
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  .slot-content {
    view {
      display: flex;
      justify-content: center;
    }
  }
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
/deep/ .u-collapse {
  .u-cell--clickable {
    background: none;
  }
  .u-cell__title-text {
    font-size: 32rpx;
  }
  .u-cell__body {
    flex-direction: row-reverse;
    .u-cell__body__content {
      margin-left: 24rpx;
    }
  }
  .item_text {
    font-size: 32rpx;
    color: #3d3d3d;
    margin: 16rpx 0;
    padding-left: 118rpx;
  }
}
.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
.box1 {
  margin-top: 20rpx;
}
</style>
